<template>
  <div>
    <!-- 联系方式 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">联系方式</el-button>
      </div>
    </div>
    <div class="phone">
      <br />
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        :size="formSize"
        status-icon
        class="formText"
      >
        <el-form-item label="姓         名" prop="name">
          <el-input style="width: 200px" v-model="ruleForm.name" />
        </el-form-item>

        <el-form-item label="电         话" prop="name" style="margin: 20px 0">
          <el-input style="width: 200px" v-model="ruleForm.name" />
        </el-form-item>

        <el-form-item label="邮         编" prop="name">
          <el-input style="width: 200px" v-model="ruleForm.name" />
        </el-form-item>

        <el-form-item label="二  维  码" prop="name">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <img
              src="../../../assets//img/35.png"
              style="width: 70px; height: 52px"
              alt=""
            />
            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon><Download /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item label="选择地址" prop="region">
          <div class="df">
            <el-select v-model="ruleForm.region" placeholder="选择省">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
            <el-select
              v-model="ruleForm.region"
              placeholder="选择市"
              style="margin: 0 10px"
            >
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
            <el-select v-model="ruleForm.region" placeholder="选择区">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </div>
        </el-form-item>

        <el-form-item>
          <el-input
            style="width: 620px"
            v-model="ruleForm.name"
            placeholder="请填写详细地址（非必填）"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            Create
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>

        <!-- 地图 -->

        <div id="container"></div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import top from "../../../components/top/top.vue";
import "../../../assets/css/size.css";
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

// 操作按钮
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 上传图片
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file) => {
  console.log(file);
};

const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const handleDownload = (file) => {
  console.log(file);
};

// 地图
import AMapLoader from "@amap/amap-jsapi-loader";
/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
import { shallowRef } from "@vue/reactivity";

// const map = shallowRef(null);
const path = ref([]);
const current_position = ref([]);

function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: "8e920f73eb2e6880a92ea6662eefc476",
  };
  AMapLoader.load({
    key: "95d0590aac18e064d720f86913a61e21", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      const map = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 13, //初始化地图级别
        center: [113.808299, 34.791787], //初始化地图中心点位置
      });
      // 添加插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.HawkEye",
          "AMap.Geolocation",
          "AMap.MapType",
          "AMap.MouseTool",
        ],
        function () {
          //异步同时加载多个插件
          // 添加地图插件
          map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
          map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
          map.addControl(new AMap.HawkEye()); // 显示缩略图
          map.addControl(new AMap.Geolocation()); // 定位当前位置
          map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换

          // 以下是鼠标工具插件
          const mouseTool = new AMap.MouseTool(map);
          // mouseTool.rule();// 用户手动绘制折线图,测量距离
          mouseTool.measureArea(); // 测量面积
        }
      );
      // 单击
      map.on("click", (e) => {
        // lng ==> 经度值  lat => 维度值
        current_position.value = [e.lnglat.lng, e.lnglat.lat];
        path.value.push([e.lnglat.lng, e.lnglat.lat]);
        // addMarker();
        // addPolyLine();
      });

      // 实例化点标记
      // 第一种(封成函数来触发)
      function addMarker() {
        const marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: current_position.value, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
          // 通过设置 offset 来添加偏移量
          offset: new AMap.Pixel(-26, -54),
        });
        marker.setMap(map);
      }

      // 折线
      function addPolyLine() {
        const polyline = new AMap.Polyline({
          path: path.value,
          isOutline: true,
          outlineColor: "#ffeeff",
          borderWeight: 1,
          strokeColor: "#3366FF",
          strokeOpacity: 0.6,
          strokeWeight: 5,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          // strokeDasharray: [10, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 50,
        });
        map.add([polyline]);
      }
    })
    .catch((e) => {
      console.log(e);
    });
}

initMap();
</script>
<style>
/* 图片上传大小修改 */
.el-upload--picture-card {
  --el-upload-picture-card-size: 100px !important;
}

/* 下拉框 */
.el-input__wrapper {
  width: 178px;
  height: 36px;
}
</style>
<style lang="scss" scoped>
.phone {
  // width: 1610px;
  height: 930px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  margin-left: 10px;
  // overflow: hidden;
}

.formText {
  margin: 20px 0 0 40px;
}

// 地图
.map {
  width: 1530px;
  height: 312px;
  border: 1px solid red;
  margin: 20px 40px 0 40px;
}
#container {
  width: 1530px;
  height: 312px;
  margin: 0px 20px;
}
</style>
